<template>
  <div>
    <div class="colorList">
      <span
        class="colorItem"
        v-for="item in colorList"
        :style="{ backgroundColor: item }"
        :key="item"
        @click="clickColorItem(item)"
      ></span>
    </div>
    <div class="moreColor">
      <span>{{$t('message.xmindMap.moreColour')}}</span>
      <el-color-picker
        size="mini"
        v-model="selectColor"
        @change="changeColor"
      ></el-color-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import { colorList } from "./config";
import { useRouter } from "vue-router"
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const router = useRouter();

const emit = defineEmits(["change"])
const props = defineProps({
  color: {
    type: String,
    default: "",
  },
})

const  selectColor = ref("")

onMounted(()=>{
  selectColor.value = props.color;
})

watch(()=>props.color,(val)=>{
  selectColor.value = val
})

function clickColorItem(color) {
  emit("change", color);
}
function changeColor() {
  emit("change", selectColor.value);
}

</script>
<style lang="scss" scoped>
.colorList {
  width: 240px;

  .colorItem {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }
}

.moreColor {
  display: flex;
  align-items: center;

  span {
    margin-right: 5px;
  }
}
</style>